<template>
  <el-form ref="form" :rules="rules" :model="form" label-width="80px">
    <h1 @click="denglv">
      沟通备忘录
    </h1>

    <!-- <button @click.prevent="shuju">
    h获取数据
  </button> -->
    <div v-html="dataHtml" />
    <el-form-item style="width: 100%;" class="custom-form-item" label="沟通对象姓名" prop="title" />
    <el-input v-model="form.title" placeholder="英文名或昵称也请填写，便于日后模糊搜索。" />
    <br>
    <br>
    <el-form-item style="width: 100%;" label="沟通对象身份介绍(至少包含公司、职务、如: &quot;百度PR&quot;)" prop="remark_one" />
    </el-form-item>

    <el-input v-model="form.remark_one" placeholder="模糊输入文本" />
    <br>
    <br>

    <el-form-item label="沟通日期:" prop="timestamp" />
    <el-date-picker
      v-model="form.author"
      type="datetime"
      placeholder="请选择日期"
      :locale="locale"
      @change="changeTimes"
    />
    <br>
    <br>
    <el-form-item label="聊天记录(文字或者截屏至少选中一项)" prop="remark_two" />
    <el-input v-model="form.remark_two" placeholder="无严格规范，系统支持模糊搜索。" type="textarea" :autosize="{ minRows: 5, maxRows: 5}" />
    <br>
    <br>
    <!-- <photo-wall :key="index+1" :photos="photos" @photo-uploaded="handlePhotoUploaded" :image_url="form.image_url"></photo-wall> -->
    <div class="img_click">
      <!-- <input id="imageInput" type="file" multiple @change="handleFileChange"> -->
      <input id="imageInput" type="file" multiple class="custom-file-input" @change="handleFileChange">
      <label for="imageInput" class="custom-file-label">上传聊天记录截屏</label>
      <span style="font-size:12px; color: #ccc;">(如有多张图片,请一次性上传)</span>

      <!-- <button @click="upload">上传</button> -->

      <!-- 图片列表 -->
      <div v-for="(image,index) in images" :key="image.id" class="img_item">
        <img :src="image.url" :alt="image.name" width="200" height="200" @click="showLargeImage(image.url)">
        <button class="img_btn" @click="deleteImage(index)">X</button>
      </div>
      <!-- <div v-for="image in images" :key="image.id" class="img_item">
        <img :src="image.url" :alt="image.name" width="200" height="200" @click="showLargeImage(image.url)">
        <button @click="deleteImage(image.id)" class='img_btn'>X</button>
      </div> -->
      <!-- 放大图片的模态框 -->
      <div v-if="showLargeImageModal" class="modal">
        <div class="modal-content">
          <span class="close" @click="closeLargeImage">&times;</span>
          <img :src="largeImageUrl" :alt="largeImageName" class="large-image">
        </div>
      </div>
      <br>
      <br>
      <el-form-item label="文字识别" />
      <el-input v-model="wordsList" disabled="disabled" placeholder="添加图片识别文字信息,可用于搜索" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" />
      <br>
      <br>
      <br>
      <el-form-item label="备注信息(选填)" />
      <el-input v-model="form.remark_three" placeholder="如：转发原因、补充沟通背景信息等。" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" />
      <br>
      <br>
      <br>
      <div>
        <el-form-item label="通知对象(对方会实时收到飞书提醒。不需要填写@符号)" prop="states" />
        <el-select
          v-model="value"
          multiple
          filterable
          remote
          placeholder="请模糊输入姓名"
          :filter-method="pinyingMatch"
          :visible-change="visible"
          :loading="loading"
          @change="handleSelectionChange"
        >
          <el-option
            v-for="item in curList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <br>
      <br>
      <br>
    </div>
    <!-- <el-form-item>
      <el-button type="primary" @click="onSubmit">创建任务</el-button>
      <el-button>取消</el-button>
    </el-form-item> -->
    <button v-loading.fullscreen.lock="fullscreenLoading" class="btn_click" @click.prevent="onSubmit">提交</button>
  </el-form>
</template>
<script>
import PhotoWall from '@/components/PhotoWall'
import axios from 'axios'
import pinyin from 'pinyin-match'
import 'element-ui/lib/locale/lang/zh-CN'

import { tabList, fetchPv, createArticle, updateArticle, ModifyStatus, DeleteList, uploadTest, FeishuToken } from '@/api/article'
import { formatTime } from '@/utils'
export default {
  components: { PhotoWall },
  data() {
    return {
      locale: 'zh-CN',
      Indieners: JSON.parse(window.localStorage.getItem('urselist')),
      options: [],
      value: [],
      list: [],
      showLargeImageModal: false, // 控制放大图片模态框的显示和隐藏
      largeImageUrl: '', // 放大图片的URL
      largeImageName: '', // 放大图片的名称
      loading: false,
      // states:['杜锦涛','张山山','闫晓龙','张鹏','Ashley','马旸',' 高潭清(Judy)'],
      states: [
        { label: '杜锦涛', value: '杜锦涛' },
        { label: '张山山', value: '张山山' },
        { label: '闫晓龙', value: '闫晓龙' },
        { label: '张鹏', value: '张鹏' },
        { label: 'Ashley', value: 'Ashley' },
        { label: '马旸', value: '马旸' },
        { label: '高潭清(Judy)', value: '高潭清(Judy)' },
        { label: '许亚青', value: '许亚青' },
        { label: '方曼迪', value: '方曼迪' },
        { label: '胡少阳', value: '胡少阳' },
        { label: '赵思琪', value: '赵思琪' },
        { label: '崔高洁', value: '崔高洁' },
        { label: '宋德胜', value: '宋德胜' },
        { label: '万东峰', value: '万东峰' },
        { label: '张闻玉', value: '张闻玉' },
        { label: '陈家瑾', value: '陈家瑾' },
        { label: '窦远东', value: '窦远东' },
        { label: '郭冀昂', value: '郭冀昂' },
        { label: '姜丽萍', value: '姜丽萍' },
        { label: '孙恒', value: '孙恒' },
        { label: '张锐', value: '张锐' },
        { label: '周圆', value: '周圆' },
        { label: '窦远东', value: '窦远东' },
        { label: '窦远东', value: '窦远东' },
        { label: '陈晨', value: '陈晨' },
        { label: '卢思奇', value: '卢思奇' },
        { label: '王子艺', value: '王子艺' },
        { label: '徐凡乔', value: '徐凡乔' },
        { label: '李秋里', value: '李秋里' },
        { label: '凌晨', value: '凌晨' },
        { label: '王君辉', value: '王君辉' },
        { label: '吴江', value: '吴江' },
        { label: '谢志弘', value: '谢志弘' },
        { label: '邓岚', value: '邓岚' },
        { label: '郝文婷', value: '郝文婷' },
        { label: '胡任菁', value: '胡任菁' },
        { label: '童虎成', value: '童虎成' },
        { label: '刘敬玉', value: '刘敬玉' },
        { label: '李鑫敏', value: '李鑫敏' },
        { label: '王丹', value: '王丹' },
        { label: '杜书惠', value: '杜书惠' },
        { label: '李名扬', value: '李名扬' },
        { label: '曹思颀', value: '曹思颀' },
        { label: '段宛辰', value: '段宛辰' },
        { label: '郭盛君', value: '郭盛君' },
        { label: '胡晓普', value: '胡晓普' },
        { label: '靖宇', value: '靖宇' },
        { label: '郎雨晴', value: '郎雨晴' },
        { label: '黎诗韵', value: '黎诗韵' },
        { label: '李源', value: '李源' },
        { label: '连然', value: '连然' },
        { label: '卫诗婕', value: '卫诗婕' },
        { label: '吴敏珊', value: '吴敏珊' },
        { label: '向涵姝', value: '向涵姝' },
        { label: '杨沐锦', value: '杨沐锦' },
        { label: '赵雨倩', value: '赵雨倩' },
        { label: '郑玄', value: '郑玄' },
        { label: '郑玥', value: '郑玥' },
        { label: '周永亮', value: '周永亮' },
        { label: '陈姚戈', value: '陈姚戈' },
        { label: '周艾霖', value: '周艾霖' }
      ],
      tongzList: [
        {
          name: '杜锦涛',
          tel: '17611294568',
          pinyin: 'dujintao'
        },
        {
          name: '张山山',
          tel: '15801580133'
        },
        {
          name: '闫晓龙',
          tel: '15296614598'
        },
        {
          name: '张鹏',
          tel: '18601062928'
        },
        {
          name: 'Ashley',
          tel: '13811163494'
        },
        {
          name: '马旸',
          tel: '15001278091'
        },
        {
          name: '高潭清(Judy)',
          tel: '18624491285'
        },
        {
          name: '方曼迪',
          tel: '15010153519'
        }, {
          name: '许亚青',
          tel: '13910055423'
        },
        {
          name: '胡少阳',
          tel: '17610572031'
        },
        {
          name: '崔高洁',
          tel: '15890612069'
        }, {
          name: '宋德胜',
          tel: '13205500866'
        }, {
          name: '万东峰',
          tel: '18614072819'
        }, {
          name: '张闻玉',
          tel: '13022942570'
        }, {
          name: '窦远东',
          tel: '13520804130'
        }, {
          name: '郭冀昂',
          tel: '13488835180'
        }, {
          name: '姜丽萍',
          tel: '13810411821'
        }, {
          name: '孙恒',
          tel: '13011106295'
        }, {
          name: '张锐',
          tel: '13121269668'
        }, {
          name: '周圆',
          tel: '18600224842'
        }, {
          name: '陈晨',
          tel: '15856317010'
        }, {
          name: '卢思奇',
          tel: '15313755647'
        }, {
          name: '徐凡乔',
          tel: '13683600106'
        }, {
          name: '李秋里',
          tel: '15801471670'
        }, {
          name: '凌晨',
          tel: '17801163936'
        }, {
          name: '王君辉',
          tel: '18518596668'
        }, {
          name: '吴江',
          tel: '18610631420'
        }, {
          name: '谢志弘',
          tel: '17666184228'
        }, {
          name: '邓岚',
          tel: '18810359775'
        }, {
          name: '郝文婷',
          tel: '17600115610'
        }, {
          name: '胡任菁',
          tel: '13517286227'
        }, {
          name: '刘敬玉',
          tel: '13911032007'
        }, {
          name: '童虎成',
          tel: '13718565970'
        }, {
          name: '李鑫敏',
          tel: '13753133264'
        }, {
          name: '王丹',
          tel: '15910803026'
        }, {
          name: '杜书惠',
          tel: '13522958139'
        }, {
          name: '李名扬',
          tel: '15801339148'
        }, {
          name: '陈家瑾',
          tel: '17608485566'
        }, {
          name: '王子艺',
          tel: '13936176604'
        }, {
          name: '曹思颀',
          tel: '13012262022'
        }, {
          name: '段宛辰',
          tel: '18500569586'
        }, {
          name: '郭盛君',
          tel: '17854580810'
        }, {
          name: '胡晓普',
          tel: '15901125380'
        }, {
          name: '靖宇',
          tel: '18515235093'
        }, {
          name: '郎雨晴',
          tel: '13401153710'
        }, {
          name: '黎诗韵',
          tel: '13006305826'
        }, {
          name: '李源',
          tel: '13760887537'
        }, {
          name: '连然',
          tel: '18548912956'
        }, {
          name: '卫诗婕',
          tel: '18311030219'
        }, {
          name: '吴敏珊',
          tel: '18027645560'
        }, {
          name: '向涵姝',
          tel: '13261000815'
        }, {
          name: '杨沐锦',
          tel: '18090009457'
        }, {
          name: '赵雨倩',
          tel: '13651319487'
        }, {
          name: '郑玄',
          tel: '13717888145'
        }, {
          name: '郑玥',
          tel: '13718774247'
        }, {
          name: '周永亮',
          tel: '13910257406'
        }, {
          name: '陈姚戈',
          tel: '15125253597'
        }, {
          name: '周艾霖',
          tel: '13250348165'
        }

      ],
      images: [],
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id',
        id: ''
      },
      access_token: '',
      SelectionChange: '',
      dataHtml: '',
      restaurants: [],
      listtel: [],
      state1: '',
      state2: '',
      file: '',
      texeAdd: '',
      base64StringImages: [],
      fullscreenLoading: false,
      imageInput: [],
      wordsList: '',
      timer: null,
      curList: [],
      visible: false,
      temp: {
        timestamp: null
      },
      form: {
        Indiener: JSON.parse(window.localStorage.getItem('urselist')),
        SelectionChange: '',
        title: '',
        resource: '',
        remark_one: '',
        remark_two: '',
        remark_three: '',
        importance: '',
        author: null,
        image_url: [],
        timestamp: new Date().getTime(),
        id: Math.floor(Math.random() * 1000000)
      },
      rules: {
        // title: [{ required: true, message: 'title is required', trigger: 'blur' }],
        // resource: [{ required: true, message: 'resource is required', trigger: 'blur' }],
        // remark_one: [{ required: true, message: 'remark_one is required', trigger: 'blur' }],
        // remark_two: [{ required: true, message: 'remark_two is required', trigger: 'blur' }],
        // remark_three: [{ required: true, message: 'remark_three is required', trigger: 'blur' }],
        // states: [{ required: true, message: 'states is required', trigger: 'blur' }],
      }
    }
  },
  computed: {
    filteredItems() {
      const regex = new RegExp(this.keyword, 'i') // 'i' 表示不区分大小写
      return this.items.filter(item => regex.test(item.pinyin))
    }
  },
  mounted() {
  // console.log(JSON.parse(window.localStorage.getItem('urselist')),'JSON.parse(window.localStorage.getItem('urselist')');
    //
    // 调用函数获取地址栏参数
    var urlParams = this.getURLParams()

    // 输出参数的 key 和 value
    for (var key in urlParams) {
      var value = urlParams[key]
      console.log('Key: ' + key + ', Value: ' + value)
    }
    console.log(urlParams, 'urlParams')
    axios.post('https://agi-test.geekpark.net/article/feishu/access_token', { urlParams: urlParams.code }).then(res => {
      console.log(res, 'ssssssssss')
      // alert(`欢迎登录 ${res.data.data.en_name}`)
      this.$message({
        message: `欢迎登录 ${res.data.data.en_name}`,
        type: 'success'
      })
      window.localStorage.setItem('urselist', JSON.stringify(res.data.data))
      // setTimeout(() => {
      //   this.$router.go(0)
      // }, 1000);
    })

    setTimeout(() => {
      if (JSON.parse(window.localStorage.getItem('urselist')) == null) {
        console.log('我执行了', window.localStorage.getItem('urselist'))
        const timers = 2000
        this.$message({
          message: `用户信息过期,${timers / 1000}秒后自动登录`,
          type: 'warning'
        })
        setTimeout(() => {
          this.logout()
        }, timers)
      } else {
        console.log('meizhixing', window.localStorage.getItem('urselist'))
        console.log('meizhixing')
      }
    }, 500)

    const Soage = JSON.parse(localStorage.getItem('urselist'))
    console.log(Soage, 'Soage')
    // sessionStorage
    // FeishuToken().then(res=>{
    //   console.log(res,'ssssssssss');
    // })

    // const url = window.location.href

    // const queryString = decodeURIComponent(url).split('?')[1] // 使用 split() 方法将 URL 字符串按照问号进行分割，并取得分割后的第二部分，即问号后面的内容
    // console.log(queryString, 'queryString.queryString.queryString')
    // if (queryString) {
    //   console.log(this.listQuery, 'this.listQuery  更新前')
    //   const address = queryString.slice(5) // 使用 slice() 方法截取从开始位置到第一个 '&' 符号之前的部分
    //   console.log(address, 'window.location.address')
    //   this.listQuery.title = address
    //   console.log(this.listQuery, 'this.listQuery  更新后')
    //   // this.getList()
    // } else {
    //   console.log('没有参数')
    //   // this.getList()
    // }
    var item__content = document.querySelectorAll('.el-form-item__label')
    var item__contents = document.querySelectorAll('.el-form-item__content')

    console.log(item__content, 'item__content')
    for (var i = 0; i < item__content.length; i++) {
      item__content[i].style.width = '100%'
      item__content[i].style.textAlign = 'left'
    }
    // window.location.href="https://open.feishu.cn/open-apis/authen/v1/index?app_id=cli_a5a8f892529d500c&redirect_uri=https://test-admin.geekpark.net/&state=RANDOMSTATE"
    // this.list = this.states.map(item => {
    //     return { value: `value:${item}`, label: `${item}` };
    //   });

    // this.$nextTick=()=>{
    //     var item__content=document.querySelectorAll('.el-form-item__content')
    //     console.log(item__content,'item__content');
    // }
  },
  methods: {

    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    shuju() {
      console.log(localStorage.getItem('urselist'), 'window.localStorage.getItem(urselist)')
    },

    // 获取地址栏参数
    getURLParams() {
      var params = {}
      var queryString = window.location.search.slice(1)
      var paramPairs = queryString.split('&')

      for (var i = 0; i < paramPairs.length; i++) {
        var pair = paramPairs[i].split('=')
        var key = decodeURIComponent(pair[0])
        var value = decodeURIComponent(pair[1])

        // 将参数存储到对象中
        params[key] = value
      }

      return params
    },
    changeTimes() {
      console.log(this.form.author.getTime(), 'ssssssssssssssssss')
      this.form.author = this.form.author.getTime()
    },
    denglv() {
      // axios.post('http://localhost:3000/article/tokens/login').then(res=>{
      //   console.log('res',res.data)
      //   this.dataHtml=res.data
      // })
    },
    // remoteMethod(query) {
    //   console.log(query,'queryquery');
    //     if (query !== '') {
    //       this.loading = true;
    //       setTimeout(() => {
    //         this.loading = false;
    //         this.options = this.list.filter(item => {
    //           return item.label.toLowerCase()
    //             .indexOf(query.toLowerCase()) > -1;
    //         });
    //       }, 200);
    //     } else {
    //       this.options = [];
    //     }
    //   },
    showLargeImage(url) {
      console.log('放大')

      this.largeImageUrl = url // 保存放大图片的URL
      this.showLargeImageModal = true // 显示放大图片模态框
    },
    closeLargeImage(event) {
      event.preventDefault() // 阻止默认行为
      console.log('关闭')
      this.showLargeImageModal = false // 关闭放大图片模态框
    },
    // 图片删除
    deleteImage(id) {
      event.preventDefault() // 阻止默认行为
      console.log(id, 'id')
      this.form.image_url.splice(id, 1)
      this.images.splice(id, 1)
      this.imageInput.splice(id, 1)
      this.base64StringImages.splice(id, 1) // 添加此行代码
      this.wordsList = ''

      console.log(this.images, 'images,imagesimagesimagesimagesimages')
      console.log(this.imageInput, 'this.imageInput  删除****************')

      console.log(this.form.image_url, 'this.form.image_url')
      this.sendOCRRequest()
    },

    pinyingMatch(value) {
      if (this.timer) clearTimeout(this.timer)

      this.timer = setTimeout(() => {
        // 有值时才执行过滤

        if (value) {
          // 搜索到相应的数据进行显示
          this.curList = this.states.filter((item) => pinyin.match(item.label, value))
          console.log(this.curList, 'curlist))))0')
          console.log(this.states.filter((item) => pinyin.match(item.label, value)), 'curlist))))0111111')
        }
      }, 200)
    },
    visibleChange(val) {
      if (val) {
        this.curList = this.states.slice(0, 3)
      }
    },
    getList() {
      this.listLoading = true
      tabList(this.listQuery).then(response => {
        console.log(response, 'response')
        // this.list = response.data
        console.log(this.list, 'this.list')
        //  console.log(this.listQuery,'this.listQuery')
        this.total = response.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // blurList(){
    //   console.log("触发视角时间");
    // },
    handleSelectionChange(value, label) {
      console.log('选中的值：', this.value)

      this.SelectionChange = this.value.map(item => item.replace('value:', ''))
      console.log('选中的值：', this.SelectionChange)
      this.form.SelectionChange = this.SelectionChange
      // this.Indieners=window.localStorage.urselist

      console.log(this.form.Indiener, 'this.form.Indieners')
      // console.log(JSON.parse(window.localStorage.urselist),'this.form.urselist');
      console.log(this.form.SelectionChange, 'this.form.SelectionChange')
      this.visible = false // 选择选项后关闭下拉框
    },
    handleModifyStatus() {
      console.log('我想要发送飞书推送')
      console.log('states', this.states)
      console.log(' this.texeAdd', this.texeAdd)
      console.log('this.SelectionChange', this.SelectionChange)
      console.log('tongzList', this.tongzList)
      for (var i = 0; i < this.SelectionChange.length; i++) {
        console.log(this.SelectionChange[i], 'SelectionChange[i]')
        this.tongzList.forEach((item) => {
          if (item.name === this.SelectionChange[i]) {
            this.listtel.push(item.tel)
          }
        })
      }
      console.log('this.form.Indiener————————————————————————飞书', this.form.Indiener)
      console.log(this.listtel, ' this.listtel.')
      axios.post('https://agi-test.geekpark.net/article/feishu/token', { Indiener: this.form.Indiener, texeAdd: this.texeAdd, listtel: this.listtel, SelectionChange: this.SelectionChange }).then(res => {
        console.log(res, 'resssssss飞书token')
      })
    },
    async  onSubmit() {
      if (this.form.title == '') {
        this.$notify({
          title: 'Success',
          message: '沟通对象不能为空',
          type: 'error',
          duration: 2000
        })
      } else if (this.form.remark_one == '') {
        this.$notify({
          title: 'Success',
          message: '沟通人介绍不能为空',
          type: 'error',
          duration: 2000
        })
      } else if (this.form.remark_two == '' && this.wordsList == '') {
        this.$notify({
          title: 'Success',
          message: '聊天记录或者截图不能为空',
          type: 'error',
          duration: 2000
        })
      } else if (this.SelectionChange == '') {
        this.$notify({
          title: 'Success',
          message: '通知人不能为空',
          type: 'error',
          duration: 2000
        })
      } else {
        this.fullscreenLoading = true
        setTimeout(() => {
          this.fullscreenLoading = false
        }, 2000)
        console.log(this.SelectionChange, 'this.SelectionChange')
        //  this.file = null;
        // 在这里添加上传图片的逻辑
        // 可以使用 this.images 数组中的数据进行上传操作
        // var imageInput = document.getElementById('imageInput');
        var uploadPromises = []
        for (let i = 0; i < this.imageInput.length; i++) {
          const formData = new FormData()
          formData.append('upload_file', this.imageInput[i])
          const uploadPromise = axios.post('https://mainssl.geekpark.net/api/v1/admin/images', formData)
            .then(res => {
              console.log(res.data.image.url, 'res' + i)
              if (!this.form.image_url) {
                this.form.image_url = [] // 初始化this.form.image_url数组
              }
              this.form.image_url.push(res.data.image.url)
              console.log(res, 'res.data 376666666666666——————————————————————————————')
            })
            .catch(error => {
              console.log(error)
              alert('照片上传失败！')
            })
          uploadPromises.push(uploadPromise)
        }
        // 等待所有图片上传完成
        await Promise.all(uploadPromises)

        console.log('submit!')
        console.log(this.form.image_url, 'this.image_url')
        console.log(this.form, 'this.form')

        this.form.importance = this.wordsList
        this.form.Indiener = this.Indieners.name
        createArticle(this.form).then(() => {
        // this.list.unshift(this.temp)
        // console.log(this.temp.timestamp, 'this.temp')
        // console.log(this.temp.timestamp.getTime() ,'this.temp.timestamp.getTime() ')
        // this.addDomain()
        //   this.removeDomain()
          this.texeAdd = this.form.title
          this.handleModifyStatus()
          this.getList()
          // this.$notify({
          //   title: 'Success',
          //   message: 'Created Successfully',
          //   type: 'success',
          //   duration: 2000
          // })
          // this.$message({
          //   message: `提交成功,通知已提交给${this.SelectionChange},现可退出本窗口`,
          //   type: 'success',
          //   duration:0
          // });
          this.imageInput = []
          alert(`沟通记录已保存，已同时以飞书消息的方式推送给${this.SelectionChange}。现在可直接关闭本窗口。`)
          // this.form = {}
          // this.images = []
          // this.value=[]
          console.log(this.states, 'states')
          this.states = this.states
          setTimeout(() => {
          // 刷新页面
            location.reload()
          }, 500)
        // this.form = {}
        // this.images = []
        })
      }
    },
    async handleFileChange(event) {
      const files = event.target.files
      const promises = []
      for (let i = 0; i < files.length; i++) {
        const file = files[i]
        const reader = new FileReader()

        const promise = new Promise((resolve, reject) => {
          reader.onload = (e) => {
            var base64String = e.target.result
            var base64StringWithoutPrefix = base64String.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')
            console.log(e.target.result, ' e.target.result')

            this.images.push({
              url: e.target.result
            })
            console.log(this.images, 'this.images')

            this.base64StringImages.push({
              url: base64StringWithoutPrefix
            })

            resolve()
          }

          reader.onerror = (error) => {
            reject(error)
          }

          reader.readAsDataURL(file)
        })

        promises.push(promise)
      }

      Promise.all(promises).then(() => {
        console.log(this.images, 'images')
        console.log(this.base64StringImages, 'base64StringImages')
        // 在所有图片上传完毕后调用OCR请求方法

        var imageInputs = document.getElementById('imageInput')
        console.log(imageInputs.files, 'imageInput222222222222222222&&&&&&&&&&&')
        for (var i = 0; i < imageInputs.files.length; i++) {
          this.imageInput.push(imageInputs.files[i])
        }
        this.sendOCRRequest()
      })
    },

    sendOCRRequest() {
      var mergedArray = []
      for (var i = 0; i < this.base64StringImages.length; i++) {
        axios
          .post('https://agi-test.geekpark.net/article/ocr/token', { base64StringImages: this.base64StringImages[i].url })
          .then((res) => {
            mergedArray = mergedArray.concat(...res.data.words_result)
            const merged = Object.assign({}, ...mergedArray)
            console.log(merged)
            console.log(mergedArray, 'mergedArray')
            console.log(merged, 'merged')
            console.log('this.wordsList', this.wordsList)
            const mergedObject = mergedArray.reduce((result, item) => {
              result.words += item.words
              return result
            }, { words: '' })
            this.wordsList = mergedObject.words

            console.log(mergedObject.words, 'this.wordsList')
          })
          .catch((error) => {
            console.error(error)
          })
      }
    },
    async corList() {
      // console.log('我是OCR');
      //   for(var i=0;i<this.images.length;i++){
      // }
    }
    // upload() {
    // }
  }
}

</script>
<style lang="scss" scoped>
.img_item{
  width: 90%;
  margin: 0 auto;
  img{
    width: 100%;
  }
}
.custom-file-input {
  display: none; /* 隐藏原始的文件输入框 */
}

.custom-file-label {
  background-color: #f1f1f1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.custom-file-label:hover {
  background-color: #e0e0e0;
}
.el-form{
  padding: 10px 30px;
}
// .el-form-item--medium{
//   display: flex;
//   flex-direction: column;
// }
.el-form-item{
  margin-bottom: 0px;
}
.img_click{
  width: 100%;
  margin-top:30px
}
.custom-file-label{
  width: 100%;
    display: block;
    text-align: center
}
.el-select--medium{
  width: 100%;
}
.el-form-item--medium .el-form-item__label{
  width: 100% !important;
  text-align: left !important;
}
label{
  width: 100%;
}
.el-input--medium{
  // margin-top: 15px;
}
.btn_click{
  color: #FFFFFF;
    background-color: #1890ff;
    border-color: #1890ff;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    border:none;
    width: 100%;
    margin-bottom: 100px;
}
.img_btn{
  position: absolute;
    right: 9%;
    z-index: 999999;
}
/* 模态框样式 */
.modal {
  // display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999999999999;
}

.modal-content {
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 80%;
  background-color: #fefefe;
  border-radius: 5px;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.large-image {
  width: 100%;
  height: auto;
}

.el-form-item__content{
  margin-left: 0px;
}
</style>
